<!--
 * @Description: 流程定义数据表*核心表 - 主页面
 * @Author: DHL
 * @Date: 2022-08-26 10:30:29
 * @LastEditors: DHL
 * @LastEditTime: 2022-12-21 16:28:05
-->
<template>
  <div class="flow-procdef-wrapper">
    <splitpanes class="default-theme">
      <pane :size="20" class="flow-procdef-left">
        <flowCategoryTree
          ref="flowCategoryTreeRef"
          :draggable="true"
          @nodeClick="handleNodeClick"
          @search="handleTreeSearch"
        ></flowCategoryTree>
      </pane>
      <pane :size="80">
        <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
          <!-- 查询表单 -->
          <template #header>
            <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="名称">
                    <el-input
                      v-model="searchForm.name"
                      clearable
                      placeholder="请输入名称"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="标识">
                    <el-input
                      v-model="searchForm.key"
                      clearable
                      placeholder="请输入标识"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6" style="padding-left: 30px">
                  <el-checkbox v-model="searchForm.latestVersion" label="最新版本" border />
                  <el-checkbox v-model="searchForm.active" label="激活的" border />
                  <el-checkbox v-model="searchForm.suspended" label="暂停的" border />
                </el-col>
              </el-row>
            </el-form>
          </template>

          <!-- 数据表格 -->
          <tw-table
            ref="tableRef"
            :loading="loading"
            :options="tableOptions"
            :events="tableEvents"
            :data="tableData"
            @search="searchList"
          >
            <template #action="{ row }">
              <el-button
                link
                type="primary"
                v-if="row.suspensionState === 2"
                @click="handleActivate(row)"
              >
                激活
              </el-button>
              <el-button
                link
                type="warning"
                v-if="row.suspensionState === 1"
                @click="handleSuspend(row)"
              >
                挂起
              </el-button>
              <el-button link type="danger" @click="handleDelete(row)"> 删除 </el-button>
            </template>
          </tw-table>
        </tw-layout>
      </pane>
    </splitpanes>

    <el-dialog v-model="delDialogVisible" title="删除提示" width="350" :showClose="false">
      <el-checkbox v-model="cascade" label="级联删除流程实例" size="large" />

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDeleteSubmit"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <actReProcdefForm ref="formRef"></actReProcdefForm>
  </div>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss">
  .flow-procdef-wrapper {
    height: 100%;
    background-color: #ffffff;

    .splitpanes__pane {
      background-color: #ffffff;
    }

    .flow-procdef-left {
      height: calc(100% - 20px);
      padding: 10px;
    }
  }
</style>
